<template>
    <div class="setting font flex">
        <Aside />
        <div class="box" :class="{ 'w87p': !store.state }">
            <Nav />
            <div class="ml-10 mr-10 mt-10 brs bg-fff pt-5 pl-5 pr-5">
                <el-table :data="tableData" table-layout="fixed" style="width: 100%; height:86vh">
                    <el-table-column prop="user_group_id" label="id" align="center" />
                    <el-table-column prop="user_department_name" label="部门" align="center" />
                    <el-table-column label="用户组" align="center">
                        <template #default=scope>
                            <el-tag disable-transitions>{{ scope.row.UserGroupName }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template #default=operate>
                            <el-button @click="set(operate.row.user_group_id)" type="primary" link>编辑</el-button>
                            <el-button type="primary" link>删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination class="flex jc-c pt-10 pb-10" layout="prev, pager, next" :page-size="10" @prev-click="prev"
                    @next-click="next" :total="tableData.length" />
                <!-- 编辑 -->
                <el-dialog v-model="dialogVisible" title="编辑" width="50%">
                    <div class="flex aic jc-sa">
                        <div>
                            <h4 class="mb-10">用户组权限：</h4>
                            <el-tree :data="permissionList" show-checkbox default-expand-all node-key="id" @check="userRight" :default-checked-keys="id"
                                :props="defaultProps" />
                        </div>
                        <div>
                            <h4 class="mb-10">路由权限：</h4>
                            <el-tree :data="data" show-checkbox default-expand-all node-key="id" :default-checked-keys="[5]"
                                :props="defaultProps" />
                        </div>
                    </div>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="dialogVisible = false">取消</el-button>
                            <el-button type="primary" @click="dialogVisible = false">
                                确定
                            </el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import *as $axios from '../../api/index'
import Aside from '../components/Aside.vue';
import Nav from '../components/Nav.vue';
import { useDemoStore } from '../../pinia/index'
const store = useDemoStore()

// 获取部门信息
const tableData = ref([])
const getTableData = () => {
    $axios.$groupOldGroupList({ token: store.token }).then(res => {
        if (res.Status == 0) {
            tableData.value = res.data
            console.log(res.data)
        } else {
            console.log('错误')
        }
    })
}


// 分页
const prev = (val) => {  //上一页
    console.log(val)
}
const next = (val) => { //下一页
    console.log(val)
}

// 编辑
const dialogVisible = ref(false)
const set = (val) => {
    dialogVisible.value = true
    getPermissions(val)
}

const id = ref([1,5,8])
// 获取部门权限
const defaultProps = {
    children: 'authList',
    label: 'Page_elementdescribe',
}
const permissionList = ref([])
const getPermissions = (id)=>{
    const data = {
        token:store.token,
        user_group_id:id
    }
    $axios.$groupOldGroupAuth(data).then(res=>{
        if(res.Status == 0){
            permissionList.value = res.data
        }
        console.log(res.data)
    })
}

// 用户组点击节点复选框之后触发
const userRight = (val,a)=>{
    console.log(a)
}


onMounted(() => {
    getTableData()
})

</script>

<style lang="less" scoped>
@import url('./setting.less');
</style>